<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      action="#"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :http-request="upload"
    >
      <img style="max-width:304px;max-height:171px" :src="imageUrl" alt="">
    </el-upload>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import COS from 'cos-js-sdk-v5'
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'AKIDRhgOr3ze4D6i4A1buxjETTCeqmSr0tVq', // 身份识别ID
  SecretKey: '5tSkmY4JGwMWP4TcU5PSEjxvd4E7k7DA' // 身份秘钥
})
const imageUrl = ref('https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/pic.jpg')
const upload = (res) => {
  if (res.file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'notewk-1304925042', /* 存储桶 */
      Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
      Key: res.file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: res.file, // 上传文件对象
      onProgress: (progressData) => { // 上传进度
        console.log(JSON.stringify(progressData))
      }
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        imageUrl.value = `https:${data.Location}`
        transValue();
      }
    })
  }
}
const handleAvatarSuccess = (res, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
}
// 子向父传值
// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getValue"])
// 事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件
const transValue = () => {
  emit("getValue", imageUrl.value)
}
</script>
<style lang="scss" scoped>
:deep(.el-upload-dragger){
  border-width: 3px;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
</style>
